<template>
  <div class="article-page-bottom">
    <div class="cited-reference">
      <div class="cited">
        <span v-if="citedNum > 0">This Article has been cited <span class="number">{{citedNum}}</span> times</span>
        <span v-else>This Article has not been cited</span>
      </div>
      <div class="reference">
        <span>This Article references <span class="number">{{referenceNum}}</span> articles</span>
      </div>
    </div>
    <head-t class="head" content="Direction"></head-t>
    <div class="directions">
      <h4 class="direction-article-name" v-html="articleName" title="ArticleName"></h4>
      <div class="directions-items">
        <div v-for="item in directions" :key="item" class="direction" :title="`Article Direction: ${item}`">
          <span>{{item}}</span>
        </div>
      </div>
      <div class="theme">
        <svg>
          <use href="#icon-arrowdown" />
        </svg>
        <h4 v-if="theme" title="theme">
          {{theme}}
        </h4>
        <h4 v-else title="no-theme">
          {{directions[0]}}
        </h4>
      </div>
    </div>
  </div>
</template>

<script>
import HeadT from '@/components/HeadTemp';
import '@/assets/icons/arrowdown.svg';

export default {
  name: "ArticlePageBottom",
  props: {
    msg: {
      citedNum: Number,
      referenceNum: Number,
      references: Array,
      articleName: String,
      directions: Array,
      theme: String
    }
  },
  data() {
    return {

    };
  },
  computed: {
    citedNum() {
      return this.msg.citedNum;
    },
    referenceNum() {
      return this.msg.referenceNum;
    },
    references() {
      return this.msg.references;
    },
    articleName() {
      return this.msg.articleName;
    },
    directions() {
      return this.msg.directions;
    },
    theme() {
      return this.msg?.theme ?? false;
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {
    HeadT
  },
};
</script>

<style scoped lang="scss">
.article-page-bottom {
  .cited-reference {
    margin: 0 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .number {
      font-weight: 600;
      border-top: 1px solid grey;
      border-bottom: 1px solid grey;
    }

    .cited {
      color: #2189ca;
    }

    .reference {
      color: #5a8641;
    }
  }

  .head {
    margin: 10px 0;
    background: #fbfbfb;
  }

  .directions {
    .direction-article-name {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 7px 10px;
      border-radius: 6px;
      border: #e0e0e0 1px solid;
      font-weight:normal;
      margin-bottom: 10px;
    }

    .directions-items {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      box-sizing: border-box;
      border: 1px solid rgb(45, 145, 12);
      border-radius: 14px;

      @media screen and (max-width: 640px){        
        justify-content: center;
      }

      .direction {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 7px 10px;
        width: 280px;
        margin: 10px;
        background: #f5f5f5;
        border-radius: 14px;

        span {
          text-align: center;
        }
      }
    }
  }

  .theme {
    display: flex;
    flex-direction: column;
    align-items: center;
    svg {
      font-size: 30px;
    }

    h4 {
      display: flex;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      padding: 7px 10px;
      width: 280px;
      margin: 10px;
      background: #808080;
      color: white;
      border-radius: 14px;
    }
  }
}
</style>
